<template>
  <img
    v-if="src && !imageLoadError"
    :src="src"
    :class="imgClass"
    class="product-img"
    :style="{ width: imgWidth, height: imgHeight }"
    @error="handleImageError"
  />
  <div v-else :class="placeholderClass" :style="{ width: imgWidth, height: imgHeight }">
    <el-icon :size="iconSize" :color="iconColor">
      <Picture />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture } from '@element-plus/icons-vue'

interface Props {
  src: string
  imgClass?: string
  placeholderClass?: string
  iconSize?: number | string
  iconColor?: string
  imgWidth?: string
  imgHeight?: string
}

withDefaults(defineProps<Props>(), {
  imgClass: '',
  placeholderClass: 'image-placeholder',
  iconSize: 20,
  iconColor: '#C0C4CC',
  imgWidth: '100%',
  imgHeight: '100%'
})

const imageLoadError = ref(false)

// 图片加载错误处理
const handleImageError = () => {
  imageLoadError.value = true
}
</script>

<style scoped>
.product-img {
  border-radius: 4px;
  object-fit: cover;
}
.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
</style>
